
<template>
  <div class="container">
      <!--背景-->
      <div class="bg"><img src="../../../../static/img/bg-img.png"></div>
      <!--个人详情-->
      <div class="userBox">
        <!--个人信息-->
        <div class="userimg"></div>
        <p class="nickName">未登录<span class="pen"></span></p>
        <p class="sign"><span class="orderNum"><em style="display: inline-block">60</em>单</span><span class="orderSign">我就是货运达人</span></p>
        <div class="rule" @click="showRule">货运规则</div>
        <!--我的订单-->
        <div class="driver-tit"><span class="orderIcon"></span><p>我的订单</p></div>
        <div class="driver-box">
          <div class="driver-info" v-for="(order,index) in orderList" :key="index">
            <img :src=order.imgUrl alt="">
            <p>{{order.name}}</p>
          </div>

        </div>
        <!--我的钱包-->
        <div class="driver-tit"><span class="walletIcon"></span><p>我的钱包</p></div>
        <div class="wallet-box" @click="showMyWallet">
          <div class="wallet-info" v-for="(item,index) in walletList" :key="index">
            <span>{{item.type}}</span>
            <p>{{item.money}}</p>
          </div>
        </div>
        <!--我的评价-->
        <div class="driver-tit"><span class="evaluateIcon"></span><p>我的评价</p></div>
        <div class="wallet-box" @click="showEvaluate">
          <div class="wallet-info" v-for="(item,index) in evaluateList" :key="index">
            <span>{{item.type}}</span>
            <p>{{item.num}}</p>
          </div>
        </div>
      </div>
    <tab-bar :selectNavIndex="selectNavIndex"></tab-bar>
    </div>
</template>

<script>
import tabBar from '../../../components/tabBar'
export default {
  components: {
    tabBar
  },
  data () {
    return {
      selectNavIndex: 2,
      walletList: [{
        type: '总资产(元)',
        money: 0.00
      }, {
        type: '可提现(元)',
        money: 0.00
      }, {
        type: '已提现(元)',
        money: 0.00
      }],
      orderList: [{
        imgUrl: '../../../../static/img/all-order.png',
        name: '已接单'
      }, {
        imgUrl: '../../../../static/img/underway.png',
        name: '进行中'
      }, {
        imgUrl: '../../../../static/img/order-done.png',
        name: '已完成'
      }, {
        imgUrl: '../../../../static/img/del-order.png',
        name: '已取消'
      }],
      evaluateList: [{
        type: '全部',
        num: 100
      }, {
        type: '好评',
        num: 88
      }, {
        type: '差评',
        num: 12
      }]
    }
  },
  onLoad () {
    wx.setNavigationBarTitle({
      title: '个人中心'
    })
  },
  methods: {
    showRule () {
      wx.navigateTo({
        url: './rule/main'
      })
    },
    showEvaluate () {
      wx.navigateTo({
        url: './estimate/main'
      })
    },
    showMyWallet () {
      wx.navigateTo({
        url: './wallet/main'
      })
    }
  }
}
</script>

<style scoped>
  .container{
    position: relative;
  }
  .bg{
    width: 100%;
    height: 400rpx;
    position: absolute;
    top: -104rpx;
  }
  .userBox{
    width: 100%;
    height: 1088rpx;
    position: absolute;
    top: 216rpx;
    background-color: #fff;
    border-top-left-radius: 15rpx;
    border-top-right-radius: 15rpx;
    text-align: center;
    font-size: 32rpx;
    color: #353535;
  }
  .userimg{
    width:150rpx;
    height:141rpx;
    border-radius:50%;
    margin: -82rpx auto 0 auto;
    background:url("http://img.gek6.com/Fp_pee6R1zF0FSAJVNot8rmIojm1") no-repeat center/cover;
    background-color: dimgray;
  }
  .nickName{
    padding-top: 24rpx;
    padding-bottom: 15rpx;
  }
  .pen{
    width: 21rpx;
    height: 21rpx;
    background: url("~static/img/pen.png") no-repeat center/cover;
    display: inline-block;
    margin-left: 10rpx;
  }
  .sign{
    width: 500rpx;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
    margin: 0 auto;
  }
  .sign span{
    display: inline-block;
    line-height: 24rpx;
    font-size: 22rpx;
  }
  .orderNum{
    color:#e9493b;
    border-right: 1rpx solid #363636;
    padding-right: 26rpx;
  }
  .orderSign{
    padding-left: 26rpx;
    text-align: left;
  }
  .rule{
    width: 145rpx;
    line-height: 50rpx;
    background-color: #13bf6d;
    color: #f9fff9;
    font-size: 22rpx;
    text-align: center;
    position: absolute;
    right: 0;
    border-top-left-radius: 20rpx;
    border-bottom-left-radius: 20rpx;
    top:40rpx;
  }
  .driver-tit{
    width: 200rpx;
    line-height: 55rpx;
    font-size: 28rpx;
    display: flex;
    justify-content: space-between;
    margin-left: 30rpx;
  }
  .driver-tit span{
    width: 44rpx;
    height: 55rpx;
    display: inline-block;
    margin-right: 10rpx;
  }
  .orderIcon{
    background: url("~static/img/d-order.png") no-repeat center/cover;
  }
.walletIcon{
  width: 61rpx !important;
  background: url("~static/img/d-wallet.png") no-repeat center/cover;
}
  .driver-box{
    width: 690rpx;
    margin: 24rpx auto 85rpx auto;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .driver-info{
    flex: 1;
  }
  .driver-info img{
    width: 60rpx;
    height: 60rpx;
  }
  .driver-info p{
    font-size: 24rpx;
  }
  .wallet-box{
    width: 596rpx;
    margin: 40rpx auto 100rpx auto;
    display: flex;
    justify-content: space-around;
    font-size: 22rpx;
  }
  .wallet-info p{
    padding-top: 30rpx;
  }
  .evaluateIcon{
    width: 55rpx !important;
    background:url("~static/img/d-evaluate.png") no-repeat center/cover;
  }
</style>
